<template>
	<div class="mine-container">
		<div class="mine-con">
			<el-table :data="myActivityList" class="table-con">
				<el-table-column fixed prop="title" label="活动标题" width="200" />
				<el-table-column prop="beginTime" label="开始时间" width="180" />
				<el-table-column prop="endTime" label="结束时间" width="200" />
				<el-table-column label="状态" width="500">
					<template v-slot="scope">
						<div class="btns">
							<div class="btn" :class="statusInfo(scope.row.status).classname">{{
				statusInfo(scope.row.status).text }}</div>
							<div class="btn" @click="toDetail(scope.row)">活动管理</div>
							<div class="btn" @click="toActivity(scope.row)">活动简介</div>
							<div class="btn" v-if="scope.row.status == 1" @click="cancelActivity(scope.row)">取消申请</div>
						</div>
					</template>

				</el-table-column>
			</el-table>

			<div class="pagination-block">
				<el-pagination :hide-on-single-page="isSinglePage" v-model:current-page="pageNo" v-model:page-size="pageSize"
					:small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper"
					:total="totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>

		</div>
		<div class="my-detail" v-if="showChild">

			<div class="my-detail-con">
				<div class="my-detail-close" @click="showChild = !showChild">
					<ele-Close />
				</div>
				<mydetail :data="childData"></mydetail>
			</div>

		</div>

	</div>
</template>


<script setup lang="ts">
import router from '/@/router/index';
import { ref, onMounted } from 'vue'
import { useActivityApi } from '/@/api/activity';
import mydetail from './detail.vue'
const myActivityList = ref([])
const pageNo = ref(1);
const pageSize = ref(5)

const small = ref(false)
const background = ref(false)
const totalPage = ref(10);
// const isSinglePage = computed(() => {
// 	return totalPage.value<=1
// })
const isSinglePage = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
	console.log(`current page: ${val}`)
}

onMounted(() => {
	getMyActivity();
})
async function getMyActivity() {
	const res = await useActivityApi().myAct({
		pageNo: pageNo.value,
		pageSize: pageSize.value
	});
	if (res) {
		myActivityList.value = myActivityList.value.concat(...res.data.list);
	}
}
function statusInfo(status) {
	let obj = {};
	if (status == 6) {
		obj = {
			classname: 'status6',
			text: '已取消'
		}
	} else if (status == 5) {
		obj = {
			classname: 'status5',
			text: '取消中'
		}
	} else if (status == 4) {
		obj = {
			classname: 'status4',
			text: '已经反馈'
		}
	} else if (status == 3) {
		obj = {
			classname: 'status3',
			text: '活动完成'
		}
	} else if (status == 2) {
		obj = {
			classname: 'status2',
			text: '已拒绝'
		}
	} else if (status == 1) {
		obj = {
			classname: 'status1',
			text: '审核通过 进行中'
		}
	} else {
		obj = {
			classname: 'status0',
			text: '审核中'
		}
	}
	return obj
}
const childData = ref({});
const showChild = ref(false)
function toDetail(data) {
	childData.value = data;
	showChild.value = true;
}

function toActivity(data) {
	router.push({ path: '/activity/all/detail', query: { id: data.actId } })
}
async function cancelActivity(data) {
	const res = await useActivityApi().cancelApply({
		id: data.id,
	});
	if (res) {
		// console.log(data)
		myActivityList.value.map((v) => {
			if (v.id === data.id) {
				v.status = 5;
			}
		})
	}
}

</script>

<style scoped lang="scss">
.mine-container {
	width: 100%;
	overflow: hidden;
	height: 100vh;

	.confirm-title {
		font-size: 32px;
		color: rgb(255, 27, 27);
		text-align: center;
		line-height: 60px;
		height: 105px;
	}
}

.mine-con {
	margin: 10px auto 0;
	padding-bottom: 50px;
	border-radius: 20px 20px 0 0;
	background: rgb(245, 245, 245);
	height: 100%;
}

.table-con {
	width: 96%;
	margin: auto;
	height: calc(100% - 160px);

	.btns {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;

		.btn {
			&:first-child {
				margin-left: 0;
				justify-content: flex-start;
				width: 105px;
			}

			width: 72px;
			height: 35px;
			line-height: 35px;
			border-radius: 2px;
			display: flex;
			color: #ffffff;
			background: rgb(255, 191, 51);
			align-items: center;
			justify-content: center;
			font-size: 14px;
			margin: 10px;

			+.btn {
				cursor: pointer;

			}

			&.status0 {
				background: none;
				color: #909399;
			}

			&.status1 {
				background: none;
				color: #409eff;
			}

			&.status2 {
				background: none;
				color: #f56c6c;
			}

			&.status3 {
				background: none;
				color: #67c23a;
			}

			&.status4 {
				background: none;
				color: #e6a23c;
			}

			&.status5 {
				background: none;
				color: #f56c6c;
			}

			&.status6 {
				background: none;
				color: #f56c6c;
			}
		}
	}
}

.pagination-block {
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.my-detail {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0.6);

	.my-detail-con {
		width: 95%;
		max-width: 800px;
		height: 600px;
		height: 90%;
		max-height: 600px;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		z-index: 2;

		.my-detail-close {
			width: 20px;
			height: 20px;
			position: absolute;
			right: 3px;
			top: 5px;
			z-index: 3;
			cursor: pointer;
		}
	}
}



.select-con {
	width: 96%;
	margin: 0 auto 20px;
}
</style>